@extends('WShop::layout')

@push('styles')
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.picker.css')}}" rel="stylesheet" />
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.poppicker.css')}}" rel="stylesheet" />
@endpush
@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron mui-bottom mui-password">
                <div class="flex">
                    <div class="flex-item mui-text-center color1">登录密码</div>
                    <div class="flex-item mui-text-center">支付密码</div>
                </div>
                <div class="mui-user-xx mui-active ">
                    <form class="form1"  action="{{route('f_Wap_User_updatePwd',['action'=>'login'])}}">
                        {{csrf_field()}}
                        <div class="mui-input-row">
                            <input type="password"  name='old_pwd' placeholder="请输入原登录密码">
                        </div>
                        <div class="mui-input-row">
                            <input type="password"  name="new_pwd" placeholder="请输入新登录密码">
                        </div>
                        <div class="mui-input-row">
                            <input type="password"  name="re_new_pwd" placeholder="请确认新登录密码">
                        </div>
                        <button type="button" class="mui-btns btns1" style="width: 100%;border-radius: 2px;"> 确定修改</button>
                    </form>
                </div>
                <div class="mui-user-xx">
                    <form class="form2"  action="{{route('f_Wap_User_updatePwd',['action'=>'safe'])}}">
                        {{csrf_field()}}
                        <div class="mui-input-row">
                            <input type="password"  name='old_pay_pwd' placeholder="请输入新支付密码">
                        </div>
                        <div class="mui-input-row">
                            <input type="password"  name='pay_pwd' placeholder="请输入新支付密码">
                        </div>
                        <div class="mui-input-row">
                            <input type="password"  name='re_pay_pwd' placeholder="请确认新支付密码">
                        </div>

                        <button type="button" class="mui-btns btns2" style="width: 100%;border-radius: 2px;"> 确定修改</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.picker.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.poppicker.js')}}"></script>
    <script>
        $('.btns1')[0].addEventListener('tap',function(){
            var data=$('.form1').serialize();
            var url = $('.form1').attr('action')
            sendPwd(data,url)
            return true;
        })
        $('.btns2')[0].addEventListener('tap',function(){
            var data=$('.form2').serialize();
            var url = $('.form2').attr('action')
            sendPwd(data,url)
            return true;
        })
        var a=$('.mui-password .flex .flex-item')
        for(var i=0;i<a.length;i++){
            a[i].addEventListener('tap',function(){
                $(this).addClass('color1').siblings().removeClass('color1')
                var b=$(this).index()
                $($('.mui-user-xx')[b]).addClass('mui-active').siblings().removeClass('mui-active')
            })
        }
    </script>
    <script>
        function sendPwd(data,url)
        {
            $.ajax({
                type: 'post',
                url: url,
                dataType: 'json',
                data: data
            }).done(function (response) {
                if(response.status){
                    mui.toast(response.msg);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            mui.toast(errors[index][0]);
                            break;
                        }
                    }else{
                        mui.toast(XMLHttpRequest.responseJSON.msg);

                    }
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        }
    </script>
@endpush